<!--
 * @Description: 
 * @Version: 1.0
 * @Author: tao
 * @Date: 2021-01-15 16:19:27
 * @LastEditors: tao
 * @LastEditTime: 2021-04-19 15:20:14
-->
<template>
  <div class="author">
    <a-dropdown>
      <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
        {{ userName }} <a-icon type="down" />
      </a>
      <a-menu slot="overlay">
        <!-- <a-menu-item key="0">
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="http://www.alipay.com/"
            >信息</a
          >
        </a-menu-item>
        <a-menu-divider /> -->
        <a-menu-item key="2" @click="showModel"> 修改密码 </a-menu-item>
        <a-menu-divider />
        <a-menu-item key="3" @click="logout"> 退出 </a-menu-item>
      </a-menu>
    </a-dropdown>
    <Model
      title="修改密码"
      :width="400"
      :show="isShow"
      @confirm="confirm"
      @cancel="cancel"
    >
      <Form slot="form">
        <FormItem label="旧密码">
          <a-input
            type="password"
            v-model="oldPassword"
            placeholder="请输入旧密码"
          ></a-input>
        </FormItem>
        <FormItem label="新密码">
          <a-input
            type="password"
            v-model="password"
            placeholder="请输入新密码"
          ></a-input>
        </FormItem>
        <FormItem label="新密码">
          <a-input
            type="password"
            v-model="newPassword"
            placeholder="请输入确认密码"
          ></a-input>
        </FormItem>
      </Form>
    </Model>
  </div>
</template>

<script>
import Model from "components/common/model/Model";
import Form from "components/common/form/Form";
import FormItem from "components/common/form/formItem/FormItem";
import { editPassword } from "network/login";
export default {
  components: {
    Model,
    Form,
    FormItem,
  },
  data() {
    return {
      isShow: false,
      oldPassword: "",
      password: "",
      newPassword: "",
    };
  },
  methods: {
    logout() {
      this.$store.commit("setToken", {
        token: null,
      });
      this.$router.replace({ path: "/login" });
    },
    showModel() {
      this.isShow = true;
    },
    async confirm() {
      if (!this.oldPassword || !this.password || !this.newPassword)
        return void this.$message.warning("输入不能留空");
      if (this.password != this.newPassword) {
        this.password = "";
        this.newPassword = "";
        return void this.$message.warning("两次密码输入不一致，请再次验证");
      }
      this.isShow = false;
      const result = await editPassword({
        id: this.$store.state.userId,
        username: this.$store.state.userName,
        password: this.password,
        oldpassword: this.oldPassword,
      });
      if (!result.msg) {
        return void this.$message.error("密码修改失败");
      }
    },
    cancel() {
      this.isShow = false;
    },
  },

  computed: {
    userName() {
      return this.$store.state.userName;
    },
  },
};
</script>

<style lang="less" scoped>
.author {
}
</style>